<template>
  <el-select
      style="width: 100%;"
      v-model="selected"
      filterable
      remote
      reserve-keyword
      placeholder="请输入航班号"
      :remote-method="searchFlightNumber"
      @change="changeFlightNumber"
      :loading="loading">
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
import {flightLineDetails} from "@/api/flight/line";
import {flightNumbers} from "@/api/flight/schedule";

export default {
  name: "FlightNumberSelect",
  props: {
    level: {
      type: String
    }
  },
  data() {
    return {
      loading: false,
      options: [],
      selected: null
    }
  },
  methods: {
    // 航班号选中后事件
    changeFlightNumber(value) {
      flightLineDetails(value).then(res => {
        let data = res.data
        this.$emit('select-flight-number', this.level, data.startStation, data.startStationDisplay, data.endStation, data.endStationDisplay)
      })
    },
    // 模糊搜索航班号
    searchFlightNumber(query) {
      // 输入到数字时才进行模糊搜索
      if (query.length > 2) {
        flightNumbers(query).then(res => {
          let rows = res.data
          if (rows) {
            rows.forEach(row => {
              this.options.push({
                label: row.flightNumber,
                value: row.dataId
              })
            })
          }
        })
      }
    },
  }
}
</script>

<style scoped>

</style>
